<style lang="scss" scoped>
  .wrap{
    position: relative;
    display: flex;
    width: 350px; height: 101px;
    border-bottom: 1px solid #E5E5E5;
    cursor: pointer;
  }

  .image{
    position: relative;
    display: block;
    width: 100px;
    &>img{
      background: #ccc;
    }
    &>.wait,.forbid,.timeout{
      height: 20px; width: 100%;
      background: #F5A623;
      color: #fff;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      line-height: 20px;
      font-size: 12px;
    }
    &>.forbid{
      background: #000;
      color: #fff;
    }
    &>.timeout{
      background:#FF523E;
      color: #fff;
    }
  }

  .block{
    flex: 1;
    position: relative;
  }

  .nickname{
    position: absolute;
    top: 12px;
    left: 10px;
    height:16px;
    font-size:16px;
    color:rgba(48,54,65,1);
    line-height:16px;
    text-align: left;
  }

  .icon{
    position: absolute;
    width: 14px; height: 20px;
    right: 10px; top: 12px;
  }

  .duty{
    position: absolute;
    width: 100%;
    padding-left: 10px;
    padding-right: 50px;
    box-sizing: border-box;
    top: 57px;
    height:17px;
    font-size:12px;
    color:rgba(48,54,65,1);
    line-height:17px;
    text-align: left;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .auth{
    @extend .duty;
    top: 79px;
  }

  .bg-red{
    background: #FF523E;
    width: 15px; height: 15px;
    border-radius: 50%;
  }
</style>

<template>
  <section class="wrap">
    <template v-if="!isWxProxyComponnent">
      <div class="image">
        <img :src="manageItem.usericon" width="100%" height="100%"/>
        <!--<div class="wait" v-if="">等待绑定授权</div>-->
        <div class="forbid" v-if="manageItem.substate!='enable'">禁用</div>
        <!--<div class="timeout" v-if="">未绑定，授权超时</div>-->
      </div>
      <div class="block">
        <div class="nickname">{{manageItem.username}}</div>
        <img :src="manageItem.usericon" class="icon" v-if="manageItem.userphone">
        <div class="duty">{{manageItem.duty}}</div>
        <div class="auth">管理权限：{{manageItem.auth}}</div>
      </div>
    </template>

    <template v-else>
      <div class="image">
        <img :src="agentItem.usericon" width="100%" height="100%"/>
        <!--<div class="wait" v-if="0">等待绑定授权</div>-->
        <div class="forbid" v-if="agentItem.substate != 'enable'">禁用</div>
        <!--<div class="timeout" v-else>未绑定，授权超时</div>-->
      </div>
      <div class="block">
        <div class="nickname">{{agentItem.username}}</div>
        <div class="icon bg-red"></div>
        <div class="duty">{{agentItem.location}}</div>
        <div class="auth">总订单量：暂无字段</div>
      </div>
    </template>
  </section>
</template>

<script>
  export default {
    data () {
      return {
        isWxProxyComponnent: false
      }
    },
    mounted () {
      this.isWxProxyComponnent = this.$el.hasAttribute('isWxProxyComponnent')
    },
    props:{
        manageItem:{
          type:Object,
          default() {
              return {}
          }
        },
      agentItem:{
        type:Object,
        default() {
          return {}
        }
      },
    }
  }
</script>
